<ui:composition 
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:c="http://java.sun.com/jsp/jstl/core"
    xmlns:composite="http://java.sun.com/jsf/composite">
    <composite:interface>
        <composite:attribute name="label"/>
        <composite:attribute name="value"/>
        <composite:attribute name="rows"/>
        <composite:attribute name="cols"/>
        <composite:attribute name="sourceType" default="xml"/>
        <composite:attribute name="required"/>
    </composite:interface>

    <composite:implementation>
        <h:outputStylesheet library="deltaset.faces" name="codemirror/docs.css"/>
        <h:outputScript library="deltaset.faces" name="codemirror/codemirror.js" target="head"/>
        <c:if test="#{'xml'==cc.attrs.sourceType}">
            <h:outputScript library="deltaset.faces" name="codemirror/parsexml.js" target="head"/>
        </c:if>
        <c:set var="resourcePath" value="#{facesContext.externalContext.requestContextPath}#{facesContext.externalContext.requestServletPath}/javax.faces.resource/deltaset.faces/codemirror"/>



        <h:outputLabel for="inputCode" value="#{cc.attrs.label}:" styleClass="ds-label"/>
        <div class="border">
            <h:inputTextarea value="#{cc.attrs.value}"
                             title="#{cc.attrs.label}"
                             id="inputCode"
                             rows="#{cc.attrs.rows}"
                             cols="#{cc.attrs.cols}"/>	
        </div>
        <script type="text/javascript">
  var editor = CodeMirror.fromTextArea("#{cc.clientId}:inputCode", {
	height: "200px",
	width: "90%",  
    parserfile: "parsexml.js",
    stylesheet: "#{resourcePath}/xmlcolors.css",
    path: "#{resourcePath}/",
    continuousScanning: 500,
    lineNumbers: true
  });
        </script>

    </composite:implementation>
</ui:composition>